<template>
	<view class="body">
		<view class="head">
			<view class="uni-padding-wrap">
				<view class="page-section swiper">
					<view class="page-section-spacing">
						<swiper class="swiper" style="height: 500rpx;" :indicator-dots="indicatorDots"
							:autoplay="autoplay" :interval="interval" :duration="duration">
							<swiper-item v-for="(v,i) in lunbo" :key='i'>
								<view class="swiper-item" style="height: 100%;">
									<image :src="ip+v" mode="" style="width:100%"></image>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
			<view class="t_header">
				<view>
					<text>{{dataList.pt_tuangoujiage}}</text>
				</view>
				<view>
					<text>以拼234件</text>
				</view>
			</view>
			<view class="danjia">
				<text>单买价{{dataList.pt_jiage}}</text>
			</view>
			<view class="title">
				<text>Rx</text><text>{{dataList.yp_yaoqi}} {{dataList.yp_mingcheng}}</text>
			</view>
			<view class="t_yunfei">
				<text>运费：快递6元，满88包邮</text>
			</view>
		</view>
		<view class="body1">
			<view class="b_title" @click="f1">
				已有345人参与活动
			</view>
			<view class="b_list">
				<image :src="ip+dataList.yp_imgsrc" mode=""></image>
				<view class="chengtuan">
					<text>还差</text>
					<text>1人</text>
					<text>成团</text>
					<br>
					<text>剩余</text>：<text>00:23:11</text>
				</view>
				<view class="anniu">
					<button type="default" size="mini" @click="Kt">去参团</button>
				</view>
			</view>
			<view class="rules">
				<view>
					<text>拼团规则</text>
				</view>
				<view>
					<text>好友参团 · 人满发货 · 不满退款<text class="iconfont">&#xe6a5;</text></text>
				</view>
			</view>
		</view>
		<view class="body2">
			<view class="b_t1">
				<text>规格</text>
				<text>每粒含维生素A 2000单位，维生素D3 700单位</text>
			</view>
			<view class="b_t2">
				<text>批准文号</text>
				<text>国药准字H37022974</text>
			</view>
			<view class="b_t3">
				<text>本品不支持退换货；新老包装随机发货</text>
			</view>
		</view>
		<view class="foot">
			<view>
				主治功能
			</view>
			<view>
				用于预防和治疗维生素A及D的缺乏
			</view>
			<view>
				主治功能
			</view>
			<view>
				用于预防和治疗维生素A及D的缺乏
			</view>
			<view class="sms">
				<view @click="open">
					药品说明书<text class="iconfont">&#xe6a5;</text>
				</view>
			</view>
		</view>
		<view class="qx">
			<view>
				详情
			</view>
			<view class="img">
				<image :src="ip+dataList.yp_shuomingsrc" mode=""></image>
			</view><!-- ip+dataList.yp_shuomingsrc -->
		</view>
		<view class="tkaung">
			<uni-popup background-color="white" ref="popup" :mask-click="flase">
				<text class="iconfont" @click="close">&#xe667;</text>
				<view class="shuumingshu">
					<image :src="ip+dataList.yp_shuomingsrc" mode=""></image>
				</view>
			</uni-popup>
		</view>
		<!-- <view class="tishi">
			<text>已经到底了~</text>
		</view> -->
		<view class="kongbai"></view>
		<view class="b_box">
			<view class="button">
				<view class="dandu"  @click="Ddm">
					<view class="price">
						￥{{dataList.pt_jiage}}
					</view>
					<view class="tit">
						单独购买
					</view>
				</view>
				<view class="kaituan"  @click="Kt">
					<view class="price">
						￥{{dataList.pt_tuangoujiage}}
					</view>
					<view class="tit">
						我要开团
					</view>
				</view>
			</view>
		</view>
	<!-- 弹出层 -->
	<view>
		<uni-popup ref="dandu" :mask-click="false" safe-area=true type="bottom" background-color="#fff">
			<view class="popupContent">
				<view><text class="iconfont icon-yiquxiao" @click="DdmC"></text></view>
				<view class="popupHeader">
					<view>
						<image :src="ip+dataList.yp_imgsrc" mode="widthFix"></image>
					</view>
					<view>
						<text>￥{{dataList.pt_jiage}}</text>
						<view>库存剩余：{{dataList.yp_kucun}}</view>
					</view>
				</view>
				<view class="popupguige">
					<view>规格</view>
					<view>
						<text class=".textactive">{{dataList.yp_guige}}粒</text>
						<!-- <text>50粒</text> -->
					</view>
				</view>
				<view class="popupshuliang">
					<view>数量</view>
					<view>
						<text class="iconfont icon-jianhao" @click="jian"></text>
						<input type="number" v-model="shuliang"/>
						<text class="iconfont icon-jiahao2" @click="jia"></text>
					</view>
				</view>
				<view class="popupbtn">
					<button type="warn" @click="DdmCT">确认</button>
				</view>
			</view>
		</uni-popup>
	</view>
	<view>
		<uni-popup ref="kaituan" :mask-click="false" safe-area=true type="bottom" background-color="#fff">
			<view class="popupContent">
				<view><text class="iconfont icon-yiquxiao" @click="KtC"></text></view>
				<view class="popupHeader">
					<view>
						<image :src="ip+dataList.yp_imgsrc" mode="widthFix"></image>
					</view>
					<view>
						<text>￥{{dataList.pt_tuangoujiage}}</text>
						<view>库存剩余：{{dataList.yp_kucun}}</view>
					</view>
				</view>
				<view class="popupguige">
					<view>规格</view>
					<view>
						<text class=".textactive">{{dataList.yp_guige}}粒</text>
						<!-- <text class="">50粒</text> -->
					</view>
				</view>
				<view class="popupshuliang">
					<view>数量</view>
					<view>
						<text class="iconfont icon-jianhao" @click="jian"></text>
						<input type="number" v-model="shuliang" />
						<text class="iconfont icon-jiahao2" @click="jia"></text>
					</view>
				</view>
				<view class="popupbtn">
					<button type="warn" @click="KtCT">确认</button>
				</view>
			</view>
		</uni-popup>
	</view>
	</view>
</template>

<script>
	let listData
	import {reactive,toRefs,onMounted,computed} from 'vue'
	import {useStore} from 'vuex'
	import http from '../../utils/http.js'
	import store from '../../store/index.js'
	export default {
		onLoad(option) {
			// console.log(JSON.parse(option.pt_id));
			listData = JSON.parse(option.pt_id)
		},
		setup() {
			const {state,commit,getters,dispatch} = useStore();
			onMounted(() => {
				// console.log(listData.yp_lubosrc)
				data.lunbo = listData.yp_lubosrc.split(',')
				// console.log(data.lunbo[0])
				data.dataList = listData
			})
			let data = reactive({
				shuliang:1,
				ip:'http://localhost:8088',
				ts_type:"false",
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				dataList:'',
				lunbo:[],
				jian(){
					data.shuliang--
					if(data.shuliang<=1){
						data.shuliang = 1
						wx.showToast({
						  title: '已经减到底了',
						  icon: 'none',
						  duration: 2000
						})
					}
				},
				jia(){
					data.shuliang++
					if(data.shuliang>=99){
						data.shuliang = 99
						wx.showToast({
						  title: '已经装不下了',
						  icon: 'none',
						  duration: 2000
						})
					}
				},
				open() {
					this.$refs.popup.open('center')
				},
				close() {
					this.$refs.popup.close()
					console.log(1)
				},
				Ddm() {
					this.$refs.dandu.open('bottom')
				},
				DdmC() {
					this.$refs.dandu.close()
				},
				DdmCT() {
					commit('ptdingdan/fukuan',data.dataList)
					this.$refs.dandu.close()
					uni.navigateTo({
						url: '../ptquerendingdan/ptquerendingdan'
					});
				},
				Kt() {
					this.$refs.kaituan.open('bottom')
				},
				KtC() {
					this.$refs.kaituan.close()
				},
				KtCT() {
					commit('ptdingdan/fukuan',data.dataList)
					this.$refs.kaituan.close()
					uni.navigateTo({
						url: '../ptquerendingdan/ptquerendingdan'
					});
				}
				
			})
			return {
				...toRefs(data, onMounted)
			}
			
		},
		
	}
</script>

<style lang="scss">
	@import url('~@/static/fonts/iconfont.css');

	.t_header {
		display: flex;
		justify-content: space-between;

		view:first-child {
			color: red;
			margin-top: 20rpx;
			margin-left: 20rpx;
		}

		view:last-child {
			margin-top: 20rpx;
			color: #acacac;
			margin-right: 40rpx;
			font-size: 30rpx;
		}

	}

	.danjia {
		color: red;
		margin-top: 10rpx;
		margin-left: 20rpx;
		font-size: 30rpx;
	}

	.title {
		text:first-child {
			margin-top: 20rpx;
			margin-left: 20rpx;
			background-color: red;
			width: 60rpx;
			height: 40rpx;
			display: inline-block;
			text-align: center;
			border-radius: 20rpx;
			color: white;
		}

		text:last-child {
			font-weight: 600;
		}
	}

	.t_yunfei {
		padding: 20rpx 0 40rpx 0;
		color: #acacac;
		margin-left: 20rpx;
		font-size: 30rpx;
	}

	.b_list {
		display: flex;
		justify-content: space-around;
		align-content: center;
		margin: 20rpx;

		image {
			width: 120rpx;
			height: 100rpx;
		}

		.chengtuan {
			text:nth-of-type(2) {
				color: red;
			}

			text:nth-of-type(5) {
				color: red;
			}
		}

		.anniu {
			button {
				background-color: #E64340;
				color: white;
				border-radius: 20rpx;
				margin-top: 20rpx;
			}
			// button:hover{
			// 	background-color: #007AFF;
			// }
		}
	}

	.rules {
		display: flex;
		justify-content: space-between;
		padding-bottom: 10rpx;

		view {
			margin: 20rpx;
		}
	}

	.sms {
		float: right;
		margin-right: 30rpx;
		color: red;

		.iconfont {
			color: black;
		}
	}

	.foot::after {
		clear: both;
		content: '';
		display: block;
	}

	.body {
		background-color: #efefef;
	}

	.body1,
	.body2,
	.foot {
		margin-top: 20rpx;
		background-color: white;
	}

	.head,
	.qx {
		background-color: white;
	}

	.head {
		.title {
			font-size: 30rpx;
		}
	}

	.body1 {
		font-size: 30rpx;

		.b_title {
			margin-left: 20rpx;
			padding-top: 20rpx;
		}
	}

	.body2 {

		.b_t1,
		.b_t2 {
			padding-top: 20rpx;

			text {
				margin-left: 20rpx;
			}

			text:first-child {
				font-size: 30rpx;
			}

			text:last-child {
				margin-left: 30rpx;
				font-size: 28rpx;
				color: #AAAAAA;
			}
		}

		.b_t3 {
			padding: 20rpx 0;

			text {
				margin-left: 20rpx;
				font-size: 28rpx;
				color: #AAAAAA;
			}
		}
	}

	.foot {
		view {
			padding-top: 30rpx;
			font-size: 30rpx;
			margin-left: 20rpx;
		}

		view:nth-child(2),
		view:nth-child(4) {
			color: #AAAAAA;
			font-size: 28rpx;
		}

	}

	.qx {
		// background-color: white;
		view:first-child {
			margin-left: 20rpx;
		}

		.img {

			// background-color: red;
			image {
				width: 100%;
			}
		}
	}

	.tkaung {

		uni-popup {


			.iconfont {
				position: absolute;
				right: 20rpx;
				top: 20rpx;
				font-size: 40rpx;
			}


			.shuumingshu {
				height: 800rpx;
				// padding: 30rpx;
				display: flex;
				align-items: center;
			}
		}
	}

	.b_box {
		position: fixed;
		// z-index: 999;
		bottom: 0;
		right: 0;
		width: 100%;
		background-color: white;

		.button {
			display: flex;
			justify-content: flex-end;
			text-align: center;
			font-size: 30rpx;

			.dandu {
				margin-right: 20rpx;
				width: 250rpx;
				height: 90rpx;
				background-color: #E64340;
				color: white;
			}

			.kaituan {
				width: 250rpx;
				background-color: #E64340;
				color: white;
			}
		}

	}
	.kongbai{
		background-color: white;
		height: 100rpx;
	}
	.tishi{
		background-color: white;
		text-align: center;
	}
	.popupContent{
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		>view:first-child{
			text-align: end;
		}
		.popupHeader{
			display: flex;
			// align-items: center;
			>view:first-child{
				image{
					width: 300rpx;
				}
			}
			>view:nth-of-type(2){
				padding-left: 30rpx;
				margin-top: 50rpx;
				text:first-child{
					color: red;
				}
				view{
					margin-top: 30rpx;
				}
			}
		}
		.popupguige{
			margin: 30rpx 0;
			view{
				margin-top: 20rpx;
				margin-bottom: 60rpx;
			}
			view:nth-of-type(2){
				margin: 20rpx 0;
				text{
					height: 50rpx;
					margin-left: 20rpx;
					padding: 8rpx 15rpx;
					box-sizing: border-box;
					border: 1px solid #999999;
				}
				.textactive{
					color: white;
					background-color: red;
					border: 1px solid red;
				}
			}
		}
		.popupshuliang{
			margin: 30rpx 0;
			view{
				margin-top: 40rpx;
				margin-bottom: 30rpx;
			}
			view:nth-of-type(2){
				display: flex;
				align-items: center;
				input{
					width: 60rpx;
					margin: 0 10rpx;
					text-align: center;
					border: 1px solid ;
				}
				text{
					color: #999999;
				}
				text:first-child{
					margin-left: 20rpx;
				}
			}
		}
	}
	.icon-jianhao,.icon-jiahao2,.icon-yiquxiao{
		font-size: 50rpx;
	}
</style>
